<!--

    Copyright (c) 2010-2025 Eclipse Dirigible contributors

    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v2.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v20.html

    SPDX-FileCopyrightText: Eclipse Dirigible contributors
    SPDX-License-Identifier: EPL-2.0

-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="dashboard" ng-controller="DashboardController">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title config-title></title>
        <link rel="icon" sizes="any" href="data:;base64,iVBORw0KGgo=" />
        <script type="text/javascript" src="/services/web/dashboard/configs/dashboard-perspective.js"></script>
        <script type="text/javascript" src="/services/js/platform-core/services/loader.js?id=view-js"></script>
        <script type="text/javascript" src="/webjars/chart.js/dist/chart.umd.js"></script>
        <script type="text/javascript" src="/services/web/dashboard/js/dashboard-controller.js"></script>
        <link type="text/css" rel="stylesheet" href="/services/js/platform-core/services/loader.js?id=view-css" />
        <style>
            .widget-sm {
                height: 8.5rem;
            }

            .widget-m {
                height: 12.5rem;
            }

            .widget-lg {
                height: 21.25rem;
            }

            .tile-fill-parent {
                max-width: 100%;
                width: 100%;
                max-height: 100%;
                height: 100%;
                min-height: auto;
                min-width: auto;
            }

        </style>
    </head>

    <body class="bk-vbox">
        <bk-busy-indicator-extended class="bk-fill-parent" ng-hide="state.error || !state.isBusy" size="l">
            {{state.busyText}}
        </bk-busy-indicator-extended>

        <bk-scrollbar class="bk-fill-parent" ng-show="!state.error && !state.isBusy">
            <bk-panel expanded="true" ng-show="smallWidgets.length">
                <bk-panel-header>
                    <bk-panel-expand hint="expand metrics panel content"></bk-panel-expand>
                    <h4 fd-panel-title>{{'dashboard:metrics' | t:'Metrics'}}</h4>
                </bk-panel-header>
                <bk-panel-content class="fd-container" aria-label="Small Widgets">
                    <div class="fd-row">
                        <div class="widget-sm fd-col fd-col--6 fd-col-md--3 fd-col-lg--3 fd-col-xl--3" ng-repeat="widget in smallWidgets track by widget.id">
                            <bk-tile is-container="true" class="tile-fill-parent">
                                <iframe loading="lazy" title="{{widget.translation.key | t:widget.translation.options:widget.label}}" ng-src="{{::widget.path}}" data-parameters="{{::widget.params}}"></iframe>
                            </bk-tile>
                        </div>
                    </div>
                </bk-panel-content>
            </bk-panel>
            <bk-panel expanded="true" ng-show="mediumWidgets.length">
                <bk-panel-header>
                    <bk-panel-expand hint="expand performance panel content"></bk-panel-expand>
                    <h4 fd-panel-title>{{'dashboard:performance' | t:'Performance'}}</h4>
                </bk-panel-header>
                <bk-panel-content class="fd-container" aria-label="Medium Widgets">
                    <div class="fd-row">
                        <div class="widget-m fd-col fd-col--6 fd-col-md--3 fd-col-lg--3 fd-col-xl--3" ng-repeat="widget in mediumWidgets track by widget.id">
                            <bk-tile is-container="true" class="tile-fill-parent">
                                <iframe loading="lazy" title="{{widget.translation.key | t:widget.translation.options:widget.label}}" ng-src="{{::widget.path}}" data-parameters="{{::widget.params}}"></iframe>
                            </bk-tile>
                        </div>
                    </div>
                </bk-panel-content>
            </bk-panel>
            <bk-panel expanded="true" ng-show="largeWidgets.length">
                <bk-panel-header>
                    <bk-panel-expand hint="expand statistics panel content"></bk-panel-expand>
                    <h4 fd-panel-title>{{'dashboard:statistics' | t:'Statistics'}}</h4>
                </bk-panel-header>
                <bk-panel-content class="fd-container" aria-label="Large Widgets">
                    <div class="fd-row">
                        <div class="widget-lg fd-col fd-col--6 fd-col-md--3 fd-col-lg--3 fd-col-xl--3" ng-repeat="widget in largeWidgets track by widget.id">
                            <bk-tile is-container="true" class="tile-fill-parent">
                                <iframe loading="lazy" title="{{widget.translation.key | t:widget.translation.options:widget.label}}" ng-src="{{::widget.path}}" data-parameters="{{::widget.params}}"></iframe>
                            </bk-tile>
                        </div>
                    </div>
                </bk-panel-content>
            </bk-panel>
        </bk-scrollbar>

        <bk-message-page glyph="sap-icon--error" ng-if="state.error">
            <bk-message-page-title>{{'dashboard:errMsg.genericTitle' | t:'Dashboard encounterd an error!'}}</bk-message-page-title>
            <bk-message-page-subtitle>{{errorMessage}}</bk-message-page-subtitle>
        </bk-message-page>
        <theme></theme>
    </body>

</html>
